<template>
	<view class="application">
		<view class="wrapper">
			<uni-Search class="mSearch-input-box" :mode="2" button="inside" placeholder="请输入证件号" @search="searchMember(false)" @reset="reset"  @confirm="searchMember(false)" v-model="txtBook_no"></uni-Search>
			<view class="application_content" v-if="noSearch==false">
				<view class="application_header">
					<view class="application_lt">
						<view class="name">
							<text>{{memberData.idCardName?memberData.idCardName:''}}</text>
							<text class="sex">({{memberData.gender?memberData.gender:''}}</text>
							<text class="type_name">{{memberData.type_name?memberData.type_name:""}})</text>
						</view>
						<view class="status">
							<uni-tag
								:text="memberData.status['text']" 
								size="small" 
								:inverted="true" 
								:circle="true"
								:type="memberData.status['value']">
							</uni-tag>
							</uni-tag>
						</view>
					</view>
					<view class="application_rt">
						<!-- <image src="../../static/default-avatar.png" mode=""></image> -->
					</view>
				</view>
				<view class="application_mid">
					<view class="cell">
						<view class="">
							证件号
						</view>
						<view class="">
							{{memberData.idCard?memberData.idCard:"暂无"}}
						</view>
					</view>
					<view class="cell">
						<view class="">
							隶属机构
						</view>
						<view class="">
							{{memberData.org_name?memberData.org_name:"暂无"}}
						</view>
					</view>
					<view class="cell">
						<view class="">
							联系人
						</view>
						<view class="">
							{{memberData.link_name?memberData.link_name:"暂无"}}
						</view>
					</view>
					<view class="cell">
						<view class="">
							联系电话
						</view>
						<view class="">
							{{memberData.link_phone?memberData.link_phone:"暂无"}}
						</view>
					</view>
					<view class="cell">
						<view class="">
							注册时间
						</view>
						<view class="">
							{{memberData.create_time}}
						</view>
					</view>
					<view class="cell">
						<view class="">
							到期时间
						</view>
						<view class="">
							{{memberData.end_time}}
						</view>
					</view>
				</view>
			</view>
			
			<view class="application_reason" v-if="noSearch==false">
				<view class="title">
					申请理由
				</view>
				<view class="uni-textarea">
					<textarea placeholder-style="color:#F76260" maxlength='-1' placeholder="请输入您的转会理由(必填)" v-model="txtReason"/>
				</view>
			</view>
			
			<view class="application_pic" v-if="noSearch==false">
				<view class="title">
					图片
				</view>
				<view class="uploadImg">
					<uni-upload @change="getImageInfo" :upload_auto="true" :upimg_move="true" ref="upimg" ></uni-upload>
					<view class="tip" v-if="no_pic">
						添加图片说明
					</view>
				</view>
				<!-- <view class="sunui-title">图片上传</view> -->
				<!-- <button @click="upfile">上传</button> -->
			</view>
		</view>
		
		<view class="footer" v-if="noSearch==false">
			<button  size="default" class="btn" @tap.stop="submit">提交申请</button>
		</view>
		
		<view class="nodata" v-if="nodata">
			<view class="msfont ms-wushuju">			
			</view>
			<view class="">
				无数据
			</view>
		</view>
	</view>
</template>
<script>
	import uniSearch from "@/components/uni-search/uni-search.vue"
	import uniTag from "@/components/uni-tag/uni-tag.vue";
	import {findMember,rankExtent,uploadImg,applicationTransfer} from "@/common/api.js";
	import uniUpload from "@/components/uni-upload/sunui-upimg.vue"
	export default{
		data(){
			return{
				txtBook_no:"",
				noSearch:true,
				memberData:{},
				rank_arr:[],
				no_pic:true,
				txtReason:"",
				pic_arr:[],
				nodata:false
			}
		},
		components:{
			uniSearch,
			uniTag,
			uniUpload
		},
		onLoad() {
			var _this=this;
			_this.getRankExtent()
			// this.$refs.upimg.upload_max = 5;
		},
		onBackPress(event) {
			console.log(event)
		},
		methods:{
			//获取级别范围
			getRankExtent() {
				var _this = this;
				//测试
					// _this.rankSet.itemObject.step_1.push({type_name:'1级'},{type_name:"2级"})
					// _this.rankSet.itemObject.step_2.push([{type_name:'2级'},{type_name:"1级"}],[{type_name:'3级'},{type_name:"4级"}])
					
				rankExtent().then(function(res) {
					var e = res.data;
					if (e.errcode == 0) {
						if (e.data.length > 0) {
							_this.rank_arr=e.data;
							// _this.searchMember();
						}
					}
				})
			},
			searchMember(){
				var _this=this,data={};
				_this.noSearch=true;
				_this.nodata=false;
				_this.txtReason=""
				data={
					idcard:_this.txtBook_no.trim()
				}
				findMember(data).then(function(res){
					// console.log(res)
					var e=res.data;
					if(e.errcode==0){
						if(e.data!=null){
							_this.noSearch=false;
							e.data.gender=e.data.sex=="0"?"男":"女";
							e.data.create_time=e.data.fees_start!=null?e.data.fees_start.slice(0,4)+"年"+e.data.fees_start.slice(5,7)+"月"+e.data.fees_start.slice(8,10)+'日':"暂无",
							e.data.end_time=e.data.fees_end!=null?e.data.fees_end.slice(0,4)+"年"+e.data.fees_end.slice(5,7)+"月"+e.data.fees_end.slice(8,10)+'日':"暂无"
							e.data.status=_this.checkState(e.data.transfer_state)
							_this.rank_arr.map(function(item,index){
								if(e.data.level==item.eventType_id){
									e.data.type_name=item.type_name
								}
							})
							_this.memberData=e.data;
						}else{
							_this.nodata=true;
						}
					}else if(e.errcode==1000||e.errcode==1001){
						uni.removeStorageSync('token');
						uni.reLaunch({
							url:'/pages/home/welcome'
						})
					}else{
						uni.showToast({
							position: 'center',
							icon: 'none',
							title:e.msg
						});
					}
				})
			},
			checkState(state){
				if(state==1){
					return {text:"待处理",value:"warning"}
				}else if(state==2){
					return {text:"正常",value:"success"}
				}else if(state==4){
					return {text:"过期",value:"warning"}
				}
			},
			getImageInfo(e) {
				// 上传图片或者删除图片返回信息
				// console.log(e)
				var _this=this;
				if(e.length>0){
					_this.no_pic=false;
					_this.pic_arr=e;
				}else{
					_this.no_pic=true;
				}
			},
			submit(){
				var _this=this,data={};
				if(_this.txtReason==""||_this.txtReason==null){
					uni.showToast({
						icon:"none",
						title:"请输入申请理由"
					})
					return
				}
				data={
					mem_id:_this.memberData.id,
					reason:_this.txtReason,
					img_files:_this.pic_arr.toString(),
					out_org_id:_this.memberData.org_id
				}
				applicationTransfer(data).then(function(res){
					var e=res.data;
						if(e.errcode==0){
							uni.showModal({
								title: '',
								content: e.msg,
								showCancel:false,
								confirmText:"确认",
								confirmColor:"#2680EB",
								success(res) {
									 if (res.confirm) {
											_this.reset()
										}
								}
							});
					}else if(e.errcode==1000||e.errcode==1001){
						uni.removeStorageSync('token');
						uni.reLaunch({
							url:'/pages/home/welcome'
						})
					}else{
						uni.showToast({
							position: 'center',
							icon: 'none',
							title:e.msg
						});
					}
				})
			},
			reset(){
				this.noSearch=true;
				this.nodata=false;
				this.txtReason="";
				this.txtBook_no=""
			}
		}
	}
</script>
<style lang="less" scoped>
	.wrapper{
		padding-bottom: 100rpx;
	}
	.application_content{
		margin: 24rpx;
		padding: 28rpx 44rpx;
		background: #fff;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #F1F1F2;
		.application_header{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
			border-bottom: 2rpx dashed #DBDBDB;
			padding-bottom: 28rpx;
		}
		.application_lt{
			display: flex;
			flex-direction: row;
			align-items: center;
			.name{
				display: flex;
				flex-direction: row;
			}
			.sex{
				padding-left: 20rpx;
			}
			.type_name{
				padding-left: 14rpx;
			}
		}
		.application_rt{
			display: flex;
			flex-direction: column;
			justify-content: center;
			image{
				width: 140rpx;
				height: 40rpx;
			}
		}
		text{
			font-size: 32rpx;
		}
		.status{
			padding-left: 20rpx;
		}
	}
	.application_mid{
		margin-top: 4rpx;
		.cell{
			padding-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			view:last-child{
				color: #676767;
			}
		}
	}
	.application_reason{
		// width: 100%;
		margin: 0 24rpx;
		padding: 24rpx;
		background: #fff;
		.uni-textarea{
			width: 100%;
			margin-top: 10rpx;
		}
	}
	.application_pic{
		// margin-top: 12rpx;
		margin: 24rpx 24rpx 0;
		padding: 24rpx;
		background: #fff;
		.uploadImg{
			display: flex;
			flex-direction: row;
			.tip{
				color: #D9D9D9;
				align-self: center;
			}
		}
	}
	.title{
		font-size: 32rpx;
	}
	.footer{
		position: fixed;
		bottom: 20rpx;
		width: 100%;
		z-index: 1000;
		// margin: 0 30rpx;
		.btn{
			background: #1A66FF;
			font-size: 30rpx;
			margin: 0 30rpx;
			color: #fff;
		}
	}
	.nodata{
		position: fixed;
		top: 50%;
		left: 50%;
		margin-left: -117rpx;
		margin-top: -147rpx;
		.ms-wushuju{
			font-size: 150rpx;
			color: #ccc;
		}
		view:last-child{
			color: #aaa;
			text-align: center;
			margin-left: -20rpx;
			margin-top: -55rpx;
			font-size: 40rpx;
		}
	}
</style>
